<template>
    <div class="container">
        <a-form layout="inline" :model="query" @submit="handleQuery">
            <a-form-item name="dictTypeId" label="字典类型">
                <a-select v-model:value="query.dictTypeId" placeholder="请选择字典类型" allow-clear style="width: 192px" :options="dictTypeDictList" />
            </a-form-item>
            <a-form-item name="code" label="编码">
                <a-input v-model:value="query.code" placeholder="请输入编码" allow-clear @keyup.enter="handleQuery" />
            </a-form-item>
            <a-form-item name="name" label="名称">
                <a-input v-model:value="query.name" placeholder="请输入名称" allow-clear @keyup.enter="handleQuery" />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="handleQuery">
                    <Icon icon="SearchOutlined" />
                    查询
                </a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// Component
import Icon from '@/component/common/Icon.vue';
// Model
import { Dict, DictType } from '@/model/common';
import { DictQuery } from '@/model/sys/dict';
// Plugin
import { Bus, BusEvent } from '@/plugin';
// Util
import { DictUtil } from '@/util';

// 变量
const query = ref<DictQuery>(new DictQuery());
const dictTypeDictList = ref<Dict[]>([]);

// 方法
onMounted(() => {
    init();
});

const init = () => {
    loadDict();
};

const loadDict = () => {
    DictUtil.get(DictType.DICT_TYPE).then((res) => (dictTypeDictList.value = res));
};

const handleQuery = () => {
    Bus.emit(BusEvent.REFRESH_DICT, query.value);
};
</script>

<style lang="less" scoped></style>
